<template>
    <div class="boxcard">
      <div class="card" :class="{ selected: isSelected }" @click="handleClick">
        <div class="checkbox">
          <input type="checkbox" :checked="isSelected" readonly />
        </div>
        <div class="card-content">
          <h1>设备名称：{{ title }}</h1>
          <p>状态: 
            <span :class="{ green: status === '1', red: status === '2' }"></span>
            {{ status === '1'? '空闲':'忙碌' }}
          </p>
          <p>排队人数: {{ queueCount }}人</p>
        </div>
        <slot>
          <!-- <div>ahhhhhhhh</div> -->
        </slot>
      </div>
    </div>
    </template>
    
    <script lang="ts" setup>
    import { ref, watch } from 'vue';
    const props = defineProps({
      title: {
          type: String,
          required: true
        },
        status: {
          type: String,
          required: true
        },
        queueCount: {
          type: Number,
          required: true
        },
        modelValue: {
          type: String,
          required: true
        },
        value: {
          type: String,
          required: true
        }
    })
    const emit = defineEmits(['update:modelValue'])
    const isSelected = ref<boolean>(props.modelValue === props.value)
      watch(() => props.modelValue, (newValue) => {
          isSelected.value = newValue === props.value;
        });
    
        const handleClick = () => {
          if (!isSelected.value) {
            emit('update:modelValue', props.value);
          }
        };
    </script>
    
    <style scoped>
  
    .card {
      display: flex;
    
      padding: 9px;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      height: 60px;
      box-sizing: border-box;
      margin-right: 20px;
      margin-bottom: 10px;
    }
    .card-content {
      margin-left: 15px;
      display: flex;
      align-items: center;
      
    }
    h1 {
      font-weight: bold;
      margin-right: 15px;
    }
    p{
      margin-right: 15px;
      font-weight: 800;
    }
    
    
    .checkbox {
      display: flex;
      align-items: center;
    }
    .green {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: green;
      border-radius: 50%;
    }
    .gred {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color:rgb(142, 147, 142);
      border-radius: 50%;
    }
    .red {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
    }
    input {
      width: 16px;
      height: 16px;
      
    }
    .right {
      display: flex;
      align-items: center;
    }
    </style>